<template>
  <div class="course-detail-container" v-if="course">
    <!-- 课程头部信息 -->
    <div class="course-header">
      <div class="course-header-content">
        <div class="course-info">
          <h1 class="course-title">{{ course.title }}</h1>
          <div class="course-meta">
            <span class="rating">
              <el-rate v-model="course.rating" disabled text-color="#ff9900" />
              <span>({{ course.rating }})</span>
            </span>
            <span class="students">{{ course.students }} 名学生</span>
            <span class="category">分类: {{ course.category }} > {{ course.subcategory }}</span>
            <span class="last-updated">最后更新: {{ course.lastUpdated }}</span>
          </div>
          <div class="course-tags">
            <el-tag v-for="tag in course.tags" :key="tag" size="small" effect="plain" class="tag">{{ tag }}</el-tag>
          </div>
        </div>
        <div class="course-image">
          <img :src="course.image" :alt="course.title" />
        </div>
      </div>
    </div>

    <!-- 课程主体内容 -->
    <div class="course-body">
      <div class="course-main">
        <!-- 课程导航 -->
        <div class="course-nav">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="课程介绍" name="overview"></el-tab-pane>
            <el-tab-pane label="课程内容" name="content"></el-tab-pane>
            <el-tab-pane label="讲师介绍" name="teacher"></el-tab-pane>
            <el-tab-pane label="学员评价" name="reviews"></el-tab-pane>
          </el-tabs>
        </div>

        <!-- 课程介绍 -->
        <div v-if="activeTab === 'overview'" class="course-overview">
          <div class="section">
            <h2>课程简介</h2>
            <p>{{ course.description }}</p>
          </div>

          <div class="section">
            <h2>你将学到什么</h2>
            <ul class="learn-list">
              <li v-for="(item, index) in course.whatYouWillLearn" :key="index">
                <el-icon><Check /></el-icon>
                <span>{{ item }}</span>
              </li>
            </ul>
          </div>

          <div class="section">
            <h2>适合人群</h2>
            <ul class="audience-list">
              <li v-for="(item, index) in course.targetAudience" :key="index">
                <el-icon><User /></el-icon>
                <span>{{ item }}</span>
              </li>
            </ul>
          </div>

          <div class="section">
            <h2>课程要求</h2>
            <ul class="requirements-list">
              <li v-for="(item, index) in course.requirements" :key="index">
                <el-icon><InfoFilled /></el-icon>
                <span>{{ item }}</span>
              </li>
            </ul>
          </div>
        </div>

        <!-- 课程内容 -->
        <div v-if="activeTab === 'content'" class="course-content">
          <div class="section">
            <h2>课程大纲</h2>
            <p>总计 {{ course.lectures }} 讲 · 总时长 {{ course.duration }}</p>

            <el-collapse accordion>
              <el-collapse-item v-for="section in course.sections" :key="section.id" :title="section.title">
                <div class="lecture-list">
                  <div v-for="lecture in section.lectures" :key="lecture.id" class="lecture-item">
                    <div class="lecture-info">
                      <el-icon><VideoPlay /></el-icon>
                      <span class="lecture-title">{{ lecture.title }}</span>
                      <span v-if="lecture.preview" class="preview-tag">预览</span>
                    </div>
                    <span class="lecture-duration">{{ lecture.duration }}</span>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>

        <!-- 讲师介绍 -->
        <div v-if="activeTab === 'teacher'" class="course-teacher">
          <div class="section">
            <h2>讲师信息</h2>
            <div class="teacher-info">
              <div class="teacher-avatar">
                <el-avatar :size="80" :src="course.teacher.avatar"></el-avatar>
              </div>
              <div class="teacher-detail">
                <h3>{{ course.teacher.name }} <span class="teacher-title">{{ course.teacher.title }}</span></h3>
                <div class="teacher-stats">
                  <span><el-icon><Star /></el-icon> {{ course.teacher.rating }} 评分</span>
                  <span><el-icon><User /></el-icon> {{ course.teacher.students }} 学生</span>
                  <span><el-icon><Collection /></el-icon> {{ course.teacher.courses }} 课程</span>
                </div>
                <p class="teacher-description">{{ course.teacher.description }}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 学员评价 -->
        <div v-if="activeTab === 'reviews'" class="course-reviews">
          <div class="section">
            <h2>学员评价</h2>
            <div class="review-summary">
              <div class="review-rating">
                <span class="rating-number">{{ course.rating }}</span>
                <el-rate v-model="course.rating" disabled text-color="#ff9900" />
                <span class="rating-count">{{ course.reviews.length }} 条评价</span>
              </div>
            </div>

            <div class="review-list">
              <div v-for="review in course.reviews" :key="review.id" class="review-item">
                <div class="review-header">
                  <el-avatar :size="40" :src="review.avatar"></el-avatar>
                  <div class="review-user">
                    <div class="review-username">{{ review.user }}</div>
                    <div class="review-meta">
                      <el-rate v-model="review.rating" disabled text-color="#ff9900" :size="14" />
                      <span class="review-date">{{ review.date }}</span>
                    </div>
                  </div>
                </div>
                <div class="review-content">{{ review.content }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 课程侧边栏 -->
      <div class="course-sidebar">
        <div class="course-card">
          <div class="course-price">
            <span class="current-price">{{ course.price }}</span>
            <span class="original-price">{{ course.originalPrice }}</span>
            <span class="discount">{{ Math.round((1 - parseInt(course.price.substring(1)) / parseInt(course.originalPrice.substring(1))) * 100) }}% 优惠</span>
          </div>
          
          <div class="course-actions">
            <el-button 
              type="primary" 
              size="large" 
              class="enroll-btn" 
              @click="startLearning"
            >
              {{ isEnrolled ? '开始学习' : '立即报名' }}
            </el-button>
            <div class="action-btns">
              <el-button 
                :type="isFavorite ? 'danger' : 'default'" 
                :icon="isFavorite ? 'Star' : 'StarFilled'"
                @click="toggleFavorite"
              >
                {{ isFavorite ? '取消收藏' : '收藏课程' }}
              </el-button>
              <el-button type="default" icon="Share">分享</el-button>
            </div>
          </div>
          
          <div class="course-features">
            <div class="feature-item">
              <el-icon><Clock /></el-icon>
              <span>课程时长: {{ course.duration }}</span>
            </div>
            <div class="feature-item">
              <el-icon><Document /></el-icon>
              <span>课程数量: {{ course.lectures }} 讲</span>
            </div>
            <div class="feature-item">
              <el-icon><Aim /></el-icon>
              <span>难度级别: {{ course.level }}</span>
            </div>
            <div class="feature-item">
              <el-icon><ChatDotRound /></el-icon>
              <span>授课语言: {{ course.language }}</span>
            </div>
            <div class="feature-item" v-if="course.certificate">
              <el-icon><Medal /></el-icon>
              <span>完成后可获得证书</span>
            </div>
          </div>
        </div>

        <!-- 相关课程 -->
        <div class="related-courses" v-if="relatedCourses.length > 0">
          <h3>相关课程推荐</h3>
          <div class="related-course-list">
            <div v-for="relatedCourse in relatedCourses" :key="relatedCourse.id" class="related-course-item" @click="goToCourse(relatedCourse.id)">
              <div class="related-course-image">
                <img :src="relatedCourse.image" :alt="relatedCourse.title" />
              </div>
              <div class="related-course-info">
                <div class="related-course-title">{{ relatedCourse.title }}</div>
                <div class="related-course-meta">
                  <span class="related-course-price">{{ relatedCourse.price }}</span>
                  <span class="related-course-rating">
                    <el-icon><Star /></el-icon> {{ relatedCourse.rating }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div v-else class="loading-container">
    <el-skeleton :rows="10" animated />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { Check, User, InfoFilled, VideoPlay, Star, StarFilled, Clock, Document, Aim, ChatDotRound, Medal, Collection } from '@element-plus/icons-vue';

const store = useStore();
const route = useRoute();
const router = useRouter();

// 获取课程ID
const courseId = computed(() => route.params.id);

// 当前激活的标签页
const activeTab = ref('overview');

// 从store获取课程信息
const course = computed(() => store.getters['course/currentCourse']);

// 判断课程是否已购买
const isPurchased = computed(() => store.getters['course/isPurchased'](courseId.value));

// 判断课程是否已收藏
const isFavorite = computed(() => store.getters['course/isFavorite'](courseId.value));

// 获取相关课程
const relatedCourses = computed(() => {
  if (course.value && course.value.relatedCourses) {
    return store.getters['course/getRelatedCourses'](course.value.relatedCourses);
  }
  return [];
});

// 检查用户是否已报名该课程
const isEnrolled = computed(() => {
  // 这里应该检查用户是否已报名
  return true; // 假设用户已报名
});

// 在组件挂载时获取课程详情
onMounted(() => {
  store.dispatch('course/getCourseDetail', Number(courseId.value));
});

// 开始学习
const startLearning = () => {
  if (isEnrolled.value) {
    router.push(`/course/${courseId.value}/learn`);
  } else {
    // 处理报名逻辑
    ElMessage.info('报名功能暂未实现');
  }
};

// 添加到收藏
const addToFavorites = () => {
  store.dispatch('course/addToFavorites', Number(courseId.value)).then(() => {
    ElMessage.success('已添加到收藏');
  });
};

// 从收藏中移除
const removeFromFavorites = () => {
  store.dispatch('course/removeFromFavorites', Number(courseId.value)).then(() => {
    ElMessage.success('已从收藏中移除');
  });
};

// 跳转到其他课程
const goToCourse = (id) => {
  router.push({ name: 'CourseDetail', params: { id } });
};
</script>

<style lang="scss" scoped>
.course-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  color: #333;
}

.course-header {
  background-color: #f5f7fa;
  padding: 40px 0;
  margin-bottom: 30px;

  .course-header-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
  }

  .course-info {
    flex: 1;
    padding-right: 40px;
  }

  .course-title {
    font-size: 32px;
    margin-bottom: 15px;
    color: #303133;
  }

  .course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 14px;
    color: #606266;

    .rating {
      display: flex;
      align-items: center;
      gap: 5px;
    }
  }

  .course-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;

    .tag {
      margin-right: 5px;
    }
  }

  .course-image {
    width: 400px;
    height: 225px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.course-body {
  display: flex;
  gap: 30px;
}

.course-main {
  flex: 1;
}

.course-nav {
  margin-bottom: 30px;
  border-bottom: 1px solid #e4e7ed;
}

.section {
  margin-bottom: 30px;

  h2 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #303133;
  }

  p {
    line-height: 1.6;
    color: #606266;
  }
}

.learn-list, .audience-list, .requirements-list {
  list-style: none;
  padding: 0;
  margin: 0;

  li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    line-height: 1.5;

    .el-icon {
      margin-right: 10px;
      margin-top: 3px;
      color: #409eff;
    }
  }
}

.lecture-list {
  .lecture-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #ebeef5;

    &:last-child {
      border-bottom: none;
    }

    .lecture-info {
      display: flex;
      align-items: center;
      gap: 10px;

      .el-icon {
        color: #409eff;
      }

      .preview-tag {
        background-color: #ecf5ff;
        color: #409eff;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 12px;
      }
    }

    .lecture-duration {
      color: #909399;
      font-size: 14px;
    }
  }
}

.teacher-info {
  display: flex;
  gap: 20px;
  margin-top: 20px;

  .teacher-avatar {
    flex-shrink: 0;
  }

  .teacher-detail {
    h3 {
      margin-top: 0;
      margin-bottom: 10px;
      font-size: 18px;

      .teacher-title {
        font-size: 14px;
        color: #909399;
        font-weight: normal;
        margin-left: 10px;
      }
    }

    .teacher-stats {
      display: flex;
      gap: 15px;
      margin-bottom: 15px;
      color: #606266;
      font-size: 14px;

      span {
        display: flex;
        align-items: center;
        gap: 5px;
      }
    }

    .teacher-description {
      line-height: 1.6;
      color: #606266;
    }
  }
}

.review-summary {
  margin-bottom: 20px;

  .review-rating {
    display: flex;
    align-items: center;
    gap: 10px;

    .rating-number {
      font-size: 36px;
      font-weight: bold;
      color: #303133;
    }

    .rating-count {
      color: #909399;
      font-size: 14px;
    }
  }
}

.review-list {
  .review-item {
    padding: 20px 0;
    border-bottom: 1px solid #ebeef5;

    &:last-child {
      border-bottom: none;
    }

    .review-header {
      display: flex;
      gap: 15px;
      margin-bottom: 10px;

      .review-user {
        .review-username {
          font-weight: bold;
          margin-bottom: 5px;
        }

        .review-meta {
          display: flex;
          align-items: center;
          gap: 10px;
          font-size: 12px;
          color: #909399;
        }
      }
    }

    .review-content {
      line-height: 1.6;
      color: #606266;
    }
  }
}

.course-sidebar {
  width: 350px;
  flex-shrink: 0;

  .course-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 30px;

    .course-price {
      margin-bottom: 20px;

      .current-price {
        font-size: 32px;
        font-weight: bold;
        color: #f56c6c;
        margin-right: 10px;
      }

      .original-price {
        font-size: 16px;
        color: #909399;
        text-decoration: line-through;
        margin-right: 10px;
      }

      .discount {
        background-color: #f56c6c;
        color: #fff;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 14px;
      }
    }

    .course-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 20px;
    }

    .course-features {
      .feature-item {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
        color: #606266;

        .el-icon {
          color: #409eff;
        }
      }
    }
  }

  .related-courses {
    h3 {
      font-size: 18px;
      margin-bottom: 15px;
      color: #303133;
    }

    .related-course-list {
      .related-course-item {
        display: flex;
        gap: 10px;
        padding: 10px 0;
        border-bottom: 1px solid #ebeef5;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          background-color: #f5f7fa;
        }

        &:last-child {
          border-bottom: none;
        }

        .related-course-image {
          width: 80px;
          height: 45px;
          border-radius: 4px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .related-course-info {
          flex: 1;

          .related-course-title {
            font-size: 14px;
            margin-bottom: 5px;
            color: #303133;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .related-course-meta {
            display: flex;
            justify-content: space-between;
            font-size: 12px;

            .related-course-price {
              color: #f56c6c;
              font-weight: bold;
            }

            .related-course-rating {
              display: flex;
              align-items: center;
              gap: 5px;
              color: #e6a23c;
            }
          }
        }
      }
    }
  }
}

.loading-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

@media (max-width: 1200px) {
  .course-body {
    flex-direction: column;
  }

  .course-sidebar {
    width: 100%;
  }

  .course-header .course-header-content {
    flex-direction: column;
  }

  .course-header .course-image {
    width: 100%;
    margin-top: 20px;
  }
}
</style> 